<template>
  <view class="resetting">
    <view class="resetting-container">
      <view class="resetting-box" :class="{ 'smooth-bounce-in': isBounced }">
        <view class="resetting-title">
          <text>忘记密码</text>
        </view>
        <view class="resetting-describe">
          <text>欢迎使用</text>
        </view>
        <view class="resetting-form">
          <view class="resetting-input">
            <uni-easyinput prefixIcon="person"
                           v-model="resettingInfo.code"
                           placeholder="请输入内容"
                           :clearable="false"/>
          </view>
          <view class="resetting-input">
            <uni-easyinput prefixIcon="paperplane"
                           v-model="resettingInfo.timeCode"
                           placeholder="请输入验证码"
                           :clearable="false"/>
            <button size="mini" @click="getTimeCode()" class="resetting-btn-code">获取验证码</button>
          </view>
          <view class="resetting-checkbox">
            <checkbox value="cb" checked="false" color="#6E64F8FF" style="transform:scale(0.7)"/>
            我已阅读并同意
          </view>
          <button class="resetting-btn">重置密码</button>
          <view class="resetting-box-footer">
            <text @click="">第三方登录</text>
            <text @click="toResetting">帮助中心</text>
            <text @click="toRegister">立即注册</text>
          </view>
        </view>
      </view>
      <view class="resetting-footer">
        登录即表示同意《菠萝服务条款》及使用协议
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'

const resettingInfo = ref({
  account: '',
  timeCode: ''
})

/* 是否挂载弹性动画样式 */
const isBounced = ref(false)

/* 路由注册页面 */
function toRegister() {
  uni.redirectTo({url: '/pages/register/register'})
}

/* 获取验证码 */
function getTimeCode() {

}

/* 重置 */
function toResetting() {
  uni.redirectTo({url: '/pages/home/home'})
}

/**
 * 页面挂载时触发
 */
onMounted(() => {
  /* 当页面挂载时挂载动画样式 */
  isBounced.value = true
})
</script>

<style scoped lang="scss">
@import "../../style/index.scss";

@keyframes smoothBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.smooth-bounce-in {
  animation: smoothBounceIn 0.5s ease-out forwards;
}

.resetting {
  width: 100vw;
  height: 100vh;
  background:
      linear-gradient(to bottom, transparent -100px, #fff 35vw),
      linear-gradient(to right, #ffd1de 30vw, #6e64f8);

  .resetting-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .resetting-box {
      width: 90%; // 默认宽度为屏幕宽度的90%
      max-width: 500px; // 最大宽度限制
      height: auto; // 高度自动调整
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 3px 3px rgba(216, 216, 216, 0.2);
      padding: 20px;
      box-sizing: border-box; // 确保内边距不会增加元素的总宽度

      .resetting-title {
        font-weight: bold;
        color: $an-text-color;
        font-size: 1.4em;
      }

      .resetting-describe {
        margin-top: 2.5vh;
        font-size: 1em;
        color: $an-text-color;
      }

      .resetting-form {
        margin-top: 3vh;

        .resetting-input {
          display: flex;
          margin-top: 20px;
        }

        .resetting-btn {
          margin-top: 8vh;
          width: 100%;
          font-size: $an-font-size-base;
          background: $an-color-primary;
          color: $an-text-color-inverse;
        }

        .resetting-btn-code {
          margin-left: 5px;
          font-size: $an-font-size-base;
          background: $an-bg-color;
          color: $an-text-color;
          border-radius: $an-border-radius-base;
          display: flex;
          align-items: center;
        }

        .resetting-checkbox {
          margin-top: 1.5vh;
          font-size: $an-font-size-base;
          color: $an-text-color;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
    }

    .resetting-box-footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 5vh;

      text {
        color: $an-text-color;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }

  .resetting-footer {
    width: 100vw;
    position: absolute;
    bottom: 1rem;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    color: white;
  }
}
</style>
